<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>放大镜</title>
<style type="text/css">
	canvas{ position:absolute}
	canvas #canvas1{ z-index:1}
	canvas #canvas2{ z-index:2; 
	                 left:0px; top:0px; /*绝对定位*/
					 /*border:thin dashed black; */
					 display:none;/*不显示*/}
</style>
</head>

<body>

<canvas id="canvas1" width="360px" height="360px" style="border:1px solid black"></canvas>
<canvas id="canvas2" width="200px" height="200px"  style="border:1px solid black"></canvas>
<script type="text/javascript">
	var canvas1 = document.getElementById("canvas1")
	var context = canvas1.getContext("2d")
	var image = new Image();
	image.src = "image/1.jpg";
	context.drawImage(image,0,0)
	
</script>
</body>
</html>
